import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createAddPersonAction} from '../../redux/actions/person'

class Person extends Component {

	addPerson = ()=>{
		const name = this.nameNode.value
		const age = this.ageNode.value
		const personObj = {id:nanoid(),name,age}
		//调用
		this.props.jiaYiRen(personObj)
		//添加完要干空，不然会残留在输入框里
		this.nameNode.value = ''
		this.ageNode.value = ''
	}

	render() {
		return (
			<div>
				<h2>我是Person组件,上方组件求和为{this.props.he}</h2>
				<input ref={c=>this.nameNode = c} type="text" placeholder="输入名字"/>
				<input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>
				<button onClick={this.addPerson}>添加</button>
				<ul>
					{
						this.props.yiduiren.map((p)=>{
							return <li key={p.id}>{p.name}--{p.age}</li>
						})
					}
				</ul>
			</div>
		)
	}
}

export default connect(
	state => ({yiduiren:state.rens,he:state.he}),//映射状态
	{jiaYiRen:createAddPersonAction}//映射操作状态的方法
)(Person)
/*上面的原型是这样的：
*  原型：export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
*
  	mapStateToprops原型：
	function mapStateToProps(state){
		return {count:state}
	}   简写成state => ({count:state}),  箭头函数返回一个对象 去掉{} 并加小括号
*
*  //mapDispatchToProps原型：
	/*
		原写法： jia: ()=>{}  将()=>{} 赋值给jia
		jia:(number)=> {dispatch(createIncrementAction(number))}
		简写：()里只有一个参数，可以省略() {}里只有一条语句可以省略{}
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	mapDispatchToProps的再简写  参数和方法体都省了，dispatch都省了，只告诉调用哪个action  底层自动dispatch
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
 */